<template>
  <footer id='footer'>
    <div class="container w-full h-full flex-col justify-center items-center">
      <!-- 渠道 写四行是为了完美适配背景图尺寸-->
      <section class="channel">
        <div class="title flex items-center justify-between">
          <div class="line bg-white"></div>
          <h2>您可从以下渠道购买</h2>
          <div class="line bg-white"></div>
        </div>
        <div class="allies">
          <ul class="w-full flex">
            <li v-for="item in alliesArr1" :key="item">
              <a :href="item.target" :target="item.target == 'javascript:void(0)'? '_self' : '_blank'" class="inline-block w-full h-full"></a>
            </li>
          </ul>
          <ul class="w-full flex">
            <li v-for="item in alliesArr2" :key="item">
              <a :href="item.target" :target="item.target == 'javascript:void(0)'? '_self' : '_blank'" class="inline-block w-full h-full"></a>
            </li>
          </ul>
          <ul class="w-full flex">
            <li v-for="item in alliesArr3" :key="item">
              <a :href="item.target" :target="item.target == 'javascript:void(0)'? '_self' : '_blank'" class="inline-block w-full h-full"></a>
            </li>
          </ul>
          <ul class="w-full flex last-ul">
            <li v-for="item in alliesArr4" :key="item">
              <a :href="item.target" :target="item.target == 'javascript:void(0)'? '_self' : '_blank'" class="inline-block w-full h-full"></a>
            </li>
          </ul>
        </div>
      </section>

      <!-- 订购时间 -->
      <section class="order">
        <div class="title flex items-center justify-between">
          <div class="line bg-white"></div>
          <h2>订购时间</h2>
          <div class="line bg-white"></div>
        </div>
        <div class="item-center text-center order-time">
          <span class="inline-block text-left">营业时间：24小时在线下单</span>
          <span class="inline-block text-left">客服时间：08：00—23：00</span>
        </div>
      </section>

      <!-- 联系方式 -->
      <section class="call-me">
        <div class="title flex items-center justify-between">
          <div class="line bg-white"></div>
          <h2>联系方式</h2>
          <div class="line bg-white"></div>
        </div>
        <div class="call-buy flex flex-col justify-center text-center">
          <p>电话：952014</p>
          <p>邮箱：support@520xmbz.com</p>
          <!-- <p>公司地址：惠州市惠城区帝景国际商务中心2座22层</p> -->
        </div>
      </section>
      <hr />
      <!-- <br /> -->
      <!-- <br /> -->
      <p>版权所有 © 2022 惠州市叮当熊猫烘焙有限公司</p>
      <a href="https://beian.miit.gov.cn/#/Integrated/index"><p>粤ICP备18030870号-1</p></a>
    </div>
  </footer>
</template>
<script lang='ts'>
export default { 
   setup() {
    const alliesArr1 = ref([
      { title: '美团',target: 'https://w.dianping.com/cube/evoke/meituan.html?url=imeituan%3A%2F%2Fwww.meituan.com%2Fmrn%3Fmrn_biz%3Dmeishi%26mrn_entry%3Dska-brand-profile%26mrn_component%3Dmain%26brandid%3D600847%26hallid%3D2017031%26source%3Dfenxiang%26mrn_backup_url%3Dimeituan%253A%252F%252Fwww.meituan.com%252Fpicassomodules%253Fpicassojs%253Dadp-ska-picasso%252Fhomepage_v3-vc%2526brandid%253D600847%2526hallid%253D2017031%2526source%253Dfenxiang&utm_source=appshare&utm_fromapp=more&utm_term=AandroidBgroupC11.20.404DEG202206091756530000000000000DA37249E24B54735A15809B063052FA4A162620201298565050949&utm_medium=androidweb&lch=appshare_15765ad81b16f589A6'},
      { title: '美团外卖',target: 'https://i.waimai.meituan.com/external/poi/1075113173753441?utm_source=5913&amp;wmi_from=cpoiinfo&amp;user_id=3360089687&utm_fromapp=more&utm_term=AandroidBgroupC11.20.404DEG202206091757210000000000000DA37249E24B54735A15809B063052FA4A162620201298565050662&utm_medium=androidweb&lch=appshare_185d41d4d4157704A6'},
      { title: '有赞',target: 'https://j.youzan.com/4-z5P7'},
      { title: '饿了么',target: 'https://h5.ele.me/wakeup/?jumpUrl=eleme%3A%2F%2Fminiapp%3Furl%3Dhttps%253A%252F%252Fm.duanqu.com%253F_ariver_appid%253D2021002121619934%2526page%253Dcatering-life-store%25252Fpages%25252Findex%25252Findex%25253FstoreId%25253D414736404&_ltraffic_share=dingding'},
      { title: '大众点评',target: 'https://m.dianping.com/shopshare/G1xiYlaKxFVLHMDo?msource=Appshare2021&utm_source=shop_share'}
      ]) 
    const alliesArr2 = ref([
      { title: '口碑',target: 'https://h5.ele.me/wakeup?jumpUrl=eleme%3A%2F%2Fminiapp%3Furl%3Dhttps%253A%252F%252Fm.duanqu.com%253F_ariver_appid%253D2021002121619934%2526page%253Dcatering-life-store%25252Fpages%25252Findex%25252Findex%25253FstoreId%25253D414736404&_ltraffic_share=dingding'},
      { title: '拼多多',target: 'https://mobile.yangkeduo.com/mall_page.html?mall_id=609188630&ts=1654768316974&has_decoration=1&msn=6so5lraf5icxx4ajeyclhtjzz4_axbuy&refer_share_id=ee689489a02b4c918dd7f23c46175a28&refer_share_uin=CG33FEGBSQ7FYHBFYA4J3CPWWE_GEXDA&refer_share_channel=copy_link&refer_share_form=text'},
      { title: '京东',target: 'http://thunder.jd.com/stores/#/?venderId=10269055&storeId=24496231&source=appSearch&lng=114.420573&lat=23.11359&_ts=1654768242316&utm_user=plusmember&ad_od=share&utm_source=androidapp&utm_medium=appshare&utm_campaign=t_335139774&utm_term=CopyURL'},
      { title: '天猫',target: 'https://m.tb.cn/h.fvjbPPA'},
      { title: '小红书',target: 'https://www.xiaohongshu.com/vendor/5d9ed818ebca00000187a073?naviHidden=yes&xhsshare=CopyLink&appuid=5d2364e70000000016006dca&apptime=1654768043'}
      ])
    const alliesArr3 = ref([
      { title: '微信',target: 'https://j.youzan.com/4-z5P7'},
      { title: '抖音',target: 'https://v.douyin.com/YNeKYCh/'},
      { title: '京东到家', target: 'javascript:void(0)'},
      { title: '美团', target: 'javascript:void(0)'},
      { title: '美团', target: 'javascript:void(0)'}
      ]) 
    const alliesArr4 = ref([
      { title: '美团', target: 'javascript:void(0)'},
      { title: '美团', target: 'javascript:void(0)'},
      { title: '美团', target: 'javascript:void(0)'},
      { title: '美团', target: 'javascript:void(0)'},
      { title: '美团', target: 'javascript:void(0)'}
      ])
      return {
        alliesArr1, alliesArr2, alliesArr3, alliesArr4
      }
   }
}
</script>
<style lang='scss'>
#footer {
  height: 622px;
  color: white;
  .container {
    background: url('/imgs/index/foot-bg.png') no-repeat;
    background-size: cover;
    padding: 32px 35px 9px;
    .title {
      display: flex;
      align-items: center;
      margin-bottom: 15px;
      h2 {
        font: 500 16px 'PingFang SC';
        margin: 0 11px;
      }
      .line {
        // width: 108px;
        flex:1;
        height: 1px;
      }
    }
    p {
      font: 400 12px 'PingFang SC';
      text-align: center;
    }
    .channel {
      .title {
        margin-bottom: 22px;
      }
      .allies {
        width: 298px;
        height: 251px;
        background: url('/imgs/index/sprit.png') no-repeat;
        background-size: contain;
        margin: 15px auto 32px;
        ul {
          height: 50px;
          margin-bottom: 17px;
           & > li:nth-child(5){
            margin-right: 0;
          }
          li {
            width: 50px;
            height: 50px;
            margin-right: 12px;
            a {
              border-radius: 50%;
            }
          }
        }
        .last-ul {
          justify-content: center;
          margin-left: 2px;
        }
      }
    }
    .order {
      margin-top: 30px;
      .order-time {
        margin-bottom: 20px;
        span {
          width: 154px;
          font: 400 12px 'PingFang SC';
          line-height: 22px;
        }
      }
    }
    .call-me {
      margin-bottom: 25px;
      .call-buy {
        margin-top: 15px;
        // height: 72px;
        p {
          line-height: 24px;
        }
      }
    }
    hr {
      margin-bottom: 9px;
    }
  }
}

</style>